<template>
    <div class="cmy-box">

        <!--圆球半场动画-->
        <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter">
            <div class="ball" ref="ball" v-if="flag"></div>
        </transition>

        <!--<div class="bball"></div>-->

        <!--轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <my-swipe :listImg="ListImg" :isFull="false"></my-swipe>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header" v-html="commodity.title">{{ commodity.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>
                        市场价：<span class="m-price"> ￥{{ commodity.old }}</span>
                        &nbsp;
                        销售价：<span class="r-price"> ￥{{ commodity.now }}</span>
                    </p>
                    <p>
                        购买数量：<span>
                        <!--如果从服务器拿出的数据需要传递给子组件可能会发生值为undefined，原因是我们发送ajax请求时使用的是异步操作，-->
                        <!--而在此之间不妨碍继续渲染子组件，当子组件渲染完成后可能发现父组件的值还没传过来，所以就会是undefined-->
                            <numbox @getNumBoxVal="getNumBoxVal" :maxVal="commodity.remain"></numbox>
                        </span>
                    </p>
                    <p>
                        <mt-button size="small" type="primary">立即购买</mt-button>
                        <mt-button size="small" type="danger" @click="jrCart">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <h4>商品参数</h4>
                </div>
            </div>
            <div class="mui-card-footer">
                <p>商品货号：<span>{{ commodity.id }}</span></p>
                <p>库存情况：<span>{{ commodity.remain }}件</span></p>
                <p>上架时间：<span>2015-04-20 01:19:30</span></p>
            </div>
            <div class="mui-card-footer">
                <mt-button plain type="primary" size="large">图文介绍</mt-button>
                <br/>
                <mt-button plain type="danger" size="large">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>

    // 导入轮播图组件
    import swipe from "../subcomponents/swipe.vue"

    // 导入 numbox 组件
    import numbox from "../subcomponents/numbox.vue";

    export default {
        name: "CommodityInfo",
        created() {
            // this.getAllList();
            this.getCommodityDetail();
        },
        data() {
            return {
                // 挂载路由传参
                id: this.$route.params.id,
                commodity: {},
                // 轮播图图片
                ListImg: [],
                // 小球显示和隐藏
                flag: false,
                // 加入购物车的数量，从子组件中获取，默认开始是1
                numVal: 1,
            }
        },
        methods: {
            // getAllList() {
            //     this.$http({
            //         url: 'lunbo.main',
            //         method: 'get',
            //         emulateJSON: true
            //     }).then(function (result) {
            //         if (result.status === 200) {
            //             this.ListImg = result.body;
            //         }
            //     })
            // },
            // 点击加入购物车的动画隐藏和显示
            jrCart() {
                this.flag = !this.flag;

                // 将用户加入购物车的数量展示到购物车的徽标上,使用了操作DOM的方式（vuex）
                // var cartNum = parseInt(this.numVal);
                // var badgeNum =  parseInt(badge.innerText);
                // badge.innerText = cartNum + badgeNum;

                // 将用户加入购物车的数量展示到购物车的徽标上,使用vuex方式(测试vuex)
                // this.$store.commit("cartNum",this.numVal);
                // 将商品添加到购物车（正式）
                // { id：商品id，count：商品数量，price：商品单价，selected：false }
                var shopItem = { id: this.id, count: this.numVal, price: this.commodity.now,selected: true};
                this.$store.commit("addCart",shopItem);
            },

            // 获取的子组件的参数
            getNumBoxVal(numVal) {
                this.numVal = parseInt(numVal);
            },

            // 从服务器获取商品详情页
            getCommodityDetail() {
               this.$http.get('commodityDetail.main?id=' + this.id).then((result) => {
                   if(result.status === 200) {
                       // 详情页的轮播图
                       this.ListImg = result.body.lunboUrl;
                       this.commodity = result.body;
                   }
               })
            },

            beforeEnter(el) {
                el.style.transform = "translate(0, 0)";
            },
            enter(el,done) {
                el.offsetWidth;

                // getBoundingClientRect 获取 DOM 元素距离页面的坐标
                // 有四个参数：top， left， bottom， right 分别获取四个坐标的位置

                var ballPosition = this.$refs.ball.getBoundingClientRect();
                // 在 vue 中获取 dom元素（document.getElementById），直接获取即可，因为这是js中的DOM操作，和vue组件没有关系
                // 只要在我们的页面中有这个元素就可以直接获取
                var badge = document.getElementById('badge');
                var badgePosition = badge.getBoundingClientRect();
                var xDist = badgePosition.left - ballPosition.left;
                var yDist = badgePosition.top - ballPosition.top;

                el.style.transform = `translate(${xDist}px, ${yDist}px)`;
                el.style.transition = 'all 0.3s cubic-bezier(.94,-0.13,.71,.67) ';

                done();
            },
            afterEnter(el) {
                this.flag = !this.flag
            }

        },
        components: {
            "mySwipe": swipe,
            numbox
        }
    }
</script>

<style lang="scss" scoped>
    .cmy-box {
        background-color: #EEEEEE;
        overflow: hidden;

        .m-price {
            text-decoration: line-through;
        }

        .r-price {
            color: red;
            font-size: 16px;
        }

        .mui-numbox {
            height: 30px;
        }

        /*修改p标签默认样式*/
        p {
            color: #000;
            margin-bottom: 10px;
        }

        /*将p标签修改为块级样式*/
        .mui-card-header, .mui-card-footer {
            display: block;
        }

        .mui-card-footer p {
            color: #999999;
        }

        /*制作小球*/
        .ball {
            position: absolute;
            z-index: 99;
            width: 14px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
            left: 145px;
            top: 375px;
        }


        .bball {
            width: 20px;
            height: 20px;
            position: absolute;
            border-radius: 50%;
            background-color: red;
            z-index: 99;
            left: 240px;
            top: 620px;
        }
    }
</style>
<style>
    /*我只能说，这真是个铁坑。。。其余不多说，在使用公共组件或第三方库的时候尽量不要加上 scope，scope代表当前组件下的模块*/
    .mint-button label {
        margin-bottom: 0;
        font-weight: normal;
    }
</style>